{% if is_paginated %}
    {% load i18n %}
    <!-- 电脑版的分页 -->
    <nav id="pc_pagination" class="text-center" style="display:none;">
        <ul class="pagination">
            {% if page_obj.has_previous %}
                <li><a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" aria-label="Previous"><span
                        aria-hidden="true">&laquo;</span></a></li>
            {% else %}
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
            {% endif %}
            {% for page in pages %}
                {% if page %}
                    {% ifequal page page_obj.number %}
                        <li class="active"><a href="#">{{ page }} <span class="sr-only">(current)</span></a></li>
                    {% else %}
                        <li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}">{{ page }} </a></li>
                    {% endifequal %}
                {% else %}
                    <li><a href="#">...</a></li>
                {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
                <li><a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" aria-label="Next"><span
                        aria-hidden="true">&raquo;</span></a></li>
            {% else %}
                <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                </li>
            {% endif %}
        </ul>
    </nav>
{#    <!-- 手机版的分页 基于MUI -->#}
    <div id="mobile_pagination" class="mui-content-padded" style="text-align:center;display:none;">
        <ul class="mui-pagination">
            {% if page_obj.has_previous %}
                <li class="mui-previous">
                    <a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}">&laquo;</a>
                </li>
            {% else %}
                <li class="mui-previous mui-disabled">
                    <a href="#">&laquo;</a>
                </li>
            {% endif %}

            {% for page in pages %}
                {% if page %}
                    {% ifequal page page_obj.number %}
                        <li class="mui-active"><a href="#">{{ page }}</a></li>
                    {% else %}
                        <li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}">{{ page }} </a></li>
                    {% endifequal %}
                {% else %}
                    <li><a href="#">...</a></li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
                <li class="mui-next">
                    <a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}">&raquo;</a>
                </li>
            {% else %}
                <li class="mui-next mui-disabled">
                    <a href="#">&raquo;</a>
                </li>
            {% endif %}
        </ul>
    </div>
    <script src="/static/js/isMobile.js"></script>
    <script>
        if (isMobile()) {
            document.getElementById("mobile_pagination").style.display = "";
        } else {
            document.getElementById("pc_pagination").style.display = "";
        }
    </script>
{% endif %}